<template>
  <div class="waterfall-list-wrapper">
    <div
      class="waterfall-list"
      ref="wfList"
      v-waterfall="{
        dataList,
        template: '<card></card>',
      }"
      :style="{
        width,
      }"
    >
      <slot></slot>
    </div>
    <!-- <div class="waterfall-item">
      <img />
    </div> -->
  </div>
</template>

<script>
import "./index.scss";
import { createWaterfall } from "@/directives";

export default {
  name: "WaterFallList",
  directives: {
    waterfall: createWaterfall({
      columns: 4,
      margin: 10,
    }),
  },
  props: {
    dataList: {
      type: Array,
      default() {
        return [];
      },
    },
    width: {
      type: String,
      default: "1080px",
    },
  },
  methods: {
    onWfScroll(e) {
      console.log(e.target.offsetTop);
    },
  },
};
</script>
